<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#444444"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">{{headTitle}}</view>
      <view class="head_right"> </view>
    </view>

    <view class="box">
      <view class="box_title">{{ title }}{{ phone }}</view>
      <!-- 手机号 -->
      <u-input
        class="inputPassword"
        :placeholder="placeText"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="mobile"
        @change="change"
        placeholderStyle="color:#888888"
      ></u-input>
      <view class="verify" v-show="mobileShow">{{ mobileRule }}</view>
      <!-- 验证码 -->
      <u-input
        class="inputPassword"
        type="number"
        placeholder="请输入验证码"
        maxlength="6"
        border="none"
        shape="circle"
        color="#888888"
        :fontSize="inputFont"
        v-model="smsCode"
        @change="changeSms"
        placeholderStyle="color:#888888"
      >
        <template slot="suffix">
          <u-code
            ref="uCode"
            @change="codeChange"
            seconds="120"
            changeText="Xs"
          ></u-code>
          <view @tap="getCode" class="codeTip">{{ tips }}</view>
        </template></u-input
      >
      <view class="verify" v-show="smsCodeShow">{{ smsCodeRule }}</view>
      <!-- <view class="verify" v-show="false">请输入验证码！</view> -->

      <view class="login">
        <view class="loginFont" @click="subFn">确认</view>
      </view>
    </view>

    <floatingBall></floatingBall>
  </view>
</template>
  
  <script>
import selectType from "@/components/selectType.vue";
export default {
  components: {
    selectType,
  },
  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      inputFont: "30rpx",
      mobile: "",
      mobileRule: "手机号码格式有误，请重试！",
      mobileShow: false,
      smsCode: "",
      smsCodeRule: "验证码错误，请重试！",
      smsCodeShow: false,
      // smsCodeRule:'请输入验证码！',
      tips: "",
      phone: "",
      email_or_phone: "",
      title: "当前绑定手机号码",
      headTitle: "修改手机号码",
    };
  },
  onLoad(options) {
    this.phone = options.phone;
    this.email_or_phone = options.email_or_phone;
    if (this.email_or_phone == 1) {
      this.title = "当前绑定手机号码";
      this.headTitle = "修改手机号码";
      this.placeText = "请输入需要更换的手机号码";
    } else {
      this.title = "当前绑定邮箱号";
      this.headTitle = "修改邮箱";
      this.placeText = "请输入需要更换的邮箱";
    }
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度

    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });
  },
  methods: {
    goPhone() {
      // uni.navigateTo({
      //     url:"/pages/components/recording_audio"
      // })
    },
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    change() {
      // let phoneReg = /^1[3456789]\d{9}$/;
      // if(this.mobile == ''){
      //   this.mobileShow = true
      //   this.mobileRule = '请输入手机号'
      //   return
      // }
      // if(!phoneReg.test(this.mobile)){
      //   this.mobileShow = true
      //   this.mobileRule = '手机号码格式有误，请重试'
      // } else {
      //   this.mobileShow = false
      // }
    },
    changeSms() {
      // console.log(this.smsCode);
      // if(this.smsCode == ''){
      //   this.smsCodeShow = true
      //   this.mobileRule = '请输入验证码'
      // }else {
      //   this.smsCodeShow = false
      // }
    },
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (!this.mobile) {
        if (this.email_or_phone == 1) {
          uni.$u.toast("请输入手机号");
        } else {
          uni.$u.toast("请输入邮箱");
        }
      } else {
        if (this.email_or_phone == 1) {
          this.$http
            .sendSmsCaptcha({ mobile: this.mobile })
            .then((res) => {
              console.log(res.data, 111111111);
              if (this.$refs.uCode.canGetCode) {
                // 模拟向后端请求验证码
                uni.showLoading({
                  title: "正在获取验证码",
                });
                setTimeout(() => {
                  uni.hideLoading();
                  // 这里此提示会被this.start()方法中的提示覆盖
                  uni.$u.toast("验证码已发送");
                  // 通知验证码组件内部开始倒计时
                  this.$refs.uCode.start();
                }, 2000);
              } else {
                uni.$u.toast("倒计时结束后再发送");
              }
            })
            .catch((error) => {
              console.log(error, "错误");
              uni.$u.toast(error);
            });
        } else {
          this.$http
            .send_email({ email: this.mobile })
            .then((res) => {
              console.log(res.data, 111111111);
              if (this.$refs.uCode.canGetCode) {
                // 模拟向后端请求验证码
                uni.showLoading({
                  title: "正在获取验证码",
                });
                setTimeout(() => {
                  uni.hideLoading();
                  // 这里此提示会被this.start()方法中的提示覆盖
                  uni.$u.toast("验证码已发送");
                  // 通知验证码组件内部开始倒计时
                  this.$refs.uCode.start();
                }, 2000);
              } else {
                uni.$u.toast("倒计时结束后再发送");
              }
            })
            .catch((error) => {
              console.log(error, "错误");
              uni.$u.toast(error);
            });
        }
      }
    },
    subFn() {
      if (this.mobile == "") {
        uni.$u.toast("请输入手机号");
        return;
      }
      if (this.smsCode == "") {
        uni.$u.toast("请输入验证码");
        return;
      }
      this.$http
        .userBindMobile({ mobile: this.mobile, smsCode: this.smsCode,email_or_phone:this.email_or_phone })
        .then((res) => {
          console.log(res.message, "修改手机号");
          uni.$u.toast(res.message);
          setTimeout(() => {
            uni.navigateBack({
              delta: 1,
            });
          }, 2000);
        })
        .catch((error) => {
          console.log(error, "错误");
          uni.$u.toast(error);
        });
    },
  },
};
</script>
  
  <style scoped lang="scss">
.content {
  box-sizing: border-box;
}
.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #fff;

  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    display: flex;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #444444;
  }
}
.box {
  padding: 0rpx 60rpx;
  .box_title {
    text-align: center;
    font-size: 32rpx;
    color: #888888;
    margin: 56rpx 0;
  }
  /deep/.inputPassword {
    width: 630rpx;
    height: 96rpx;
    background-color: #f4f4f4;
    margin-top: 40rpx;
    position: relative;

    .u-input__content {
      padding-left: 50rpx;
    }
    .codeTip {
      position: absolute;
      right: 50rpx;
      bottom: 30rpx;
      font-size: 30rpx;
      font-weight: 400;
      color: #55b877;
    }
  }
  .login {
    width: 630rpx;
    height: 96rpx;
    margin-top: 54rpx;
    background: linear-gradient(360deg, #50b674 0%, #aeddbd 100%);
    border-radius: 48rpx 48rpx 48rpx 48rpx;

    .loginFont {
      line-height: 96rpx;
      text-align: center;
      font-size: 30rpx;
      font-weight: 400;
      color: #ffffff;
    }
  }
  .verify {
    margin: 16rpx 0 0 30rpx;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 400;
    color: #ee6060;
  }
}
</style>